<template>
  <el-form ref="activityRefForm" style="max-width: 1000px" :inline="true" :model="activityQuery" :rules="activityRules" label-width="auto">
    <!--负责人-->
    <el-form-item v-model="activityQuery.ownerId" label="负责人" prop="ownerId" class="width">
      <el-select
          v-model="activityQuery.ownerId"
          placeholder="请选择负责人"
          clearable
          @click="loadOwner"
      >
        <!--负责人下拉列表-->
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--活动名称-->
    <el-form-item label="活动名称" prop="name" class="width">
      <el-input v-model="activityQuery.name" clearable />
    </el-form-item>

    <!--开始时间-->
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker
          v-model="activityQuery.startTime"
          type="datetime"
          placeholder="请选择开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 820px"
      />
    </el-form-item>

    <!--结束时间-->
    <el-form-item label="结束时间" class="endTime" prop="endTime">
      <el-date-picker
          v-model="activityQuery.endTime"
          type="datetime"
          placeholder="请选择结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 900px"
      />
    </el-form-item>

    <!--活动预算-->
    <el-form-item label="活动预算" prop="cost" class="width">
      <el-input v-model="activityQuery.cost" clearable/>
    </el-form-item>

    <!--活动描述-->
    <el-form-item label="活动描述" prop="description">
      <el-input
          v-model="activityQuery.description"
          style="width: 1106px"
          :rows="8"
          type="textarea"
          placeholder="请输入活动描述"
      />
    </el-form-item>

    <div>
      <el-form-item prop="cost" class="success">
        <el-button type="primary" @click="activitySubmit">提 交</el-button>
        <el-button @click="back">返 回</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import {doGet, doPost, doPut} from "../http/httpRequest.js";
import {massageTip} from "../utils/util.js";

export default {
  inject: ['reload'],
  name: "ActivityRecordView",
  data(){
    return {
      activityQuery: {},
      ownerOptions: [{}],

      // 录入市场活动验证规则
      activityRules: {
        ownerId: [
          { required: true, message: '请选择项目负责人', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        startTime: [
          { required: true, message: '请选择活动开始时间', trigger: 'blur' },
        ],
        endTime: [
          { required: true, message: '请选择活动结束时间', trigger: 'blur' },
        ],
        cost: [
          { required: true, message: '请输入活动预算', trigger: 'blur' },
          { pattern: /^[0-9]+(\.[0-9]{2})?$/ ,message: '活动预算必须是正整数',trigger: 'blur'}
        ],
        description: [
          { required: true, message:'请输入活动描述', trigger: 'blur' },
          { min: 10, max: 255, message: '活动描述字数为10-255个', trigger: 'blur' }
        ]
      }
    }
  },

  // 网页加载
  mounted() {
    this.loadOwner()
    this.loadActivity()
  },

  methods: {
    // 加载负责人
    loadOwner(){
      doGet('/api/owner',{}).then((resp)=>{
        if (resp.data.code===200){
          this.ownerOptions=resp.data.data;
        }
      })
    },

    // 返回
    back(){
      this.$router.go(-1)
    },

    // 市场活动功能
    activitySubmit(){
      let formData = new FormData();
      for (let data in this.activityQuery){
        // 如果数组中有值，就传入后端，每值就过滤
        if (this.activityQuery[data]){
          formData.append(data,this.activityQuery[data])
        }
      }
      this.$refs.activityRefForm.validate((isValid)=>{
        if (isValid){
          if (this.activityQuery.id>0){
            // 编辑市场活动
            doPut('/api/activity',formData).then(resp=>{
              if (resp.data.code===200){
                massageTip('编辑成功','success')
                this.$router.push('/dashBoard/activity')
              }else {
                massageTip('编辑失败','error')
              }
            })
          }else {
            // 市场活动提交
            doPost('/api/activity',formData).then((resp)=>{
              if (resp.data.code===200){
                massageTip('提交成功','success')
                this.$router.push('/dashBoard/activity')
              }else {
                massageTip('提交失败','error')
              }
            })
          }
        }
      })
    },

    // 加载市场活动数据
    loadActivity(){
      let id = this.$route.params.id;
      if (id){
        doGet('/api/activity/'+id,{}).then(resp=>{
          if (resp.data.code===200){
            this.activityQuery = resp.data.data;
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.width {
  width: 900px;
}
</style>